import { Box, SxProps } from "@mui/system"
import { List, ListProps, Tag, Typography } from "antd"
import React from "react"
import styled from "@emotion/styled"
import { useNavigate } from "react-router-dom"
const MessageListStyled = styled(Box)({
  h4: {
    fontWeight: "500",
  },
})
export interface MessageItem {
  title?: any
  content?: any
  time?: string

  active?: boolean //是否激活，未激活不会统计红点数
  [key: string]: any
}
export interface MessageListProps extends ListProps<MessageItem> {
  value?: MessageItem[]
  sx?: SxProps
  onItemClick?: (record: MessageItem) => void //当点击消息时
  onChange?: () => void
}
function renderBind(text: any, record: any) {
  return (
    <Box>
      <Typography.Text style={{ fontWeight: 600 }}>
        2025-6-20更新
      </Typography.Text>
      <Typography.Paragraph ellipsis={{ rows: 3 }}>
        【记忆】编辑器支持上传视频和音频了！❤
      </Typography.Paragraph>
    </Box>
  )
}
export default React.forwardRef(
  ({ value, sx, onItemClick, onChange, ...otr }: MessageListProps) => {
    const navigate = useNavigate()
    //todo get remote value
    return (
      <MessageListStyled
        sx={{ minWidth: 350, maxHeight: 500, overflow: "auto", ...sx }}
      >
        <List
          style={{ padding: "0 16px" }}
          itemLayout="horizontal"
          dataSource={value}
          renderItem={(item, index) => (
            <List.Item key={index}>
              <List.Item.Meta
                title={
                  <Box
                    sx={{
                      color: item?.active ? undefined : "text.secondary",
                    }}
                  >
                    {item.time}
                  </Box>
                }
                description={
                  <Box
                    onClick={() => {}}
                    sx={{
                      color: "text.secondary",
                      ":hover": { color: "primary.main", cursor: "pointer" },
                    }}
                  >
                    {renderBind(item.auditObject, item)}
                    <Box> {item?.content}</Box>
                  </Box>
                }
              />
            </List.Item>
          )}
          {...otr}
        />
      </MessageListStyled>
    )
  },
)
